<script>document.cookie="last=pages/editortexto/fuente.php";</script>

<?php
$tutorial=3;
$step=1;
?>

<?php if($_COOKIE['so']=='w7') {
    $so="W7";
    $simple_select="<b>realice un clic <i>izquierdo</i> </b>";
	$nombre_SO="Windows 7";
    ?>
    <link rel="stylesheet" type="text/css" media="all" href="css/editor_W7.css">
<?php }?>

<?php if($_COOKIE['so']=='xp') {
    $so="XP";
    $simple_select="<b>realice un clic <i>izquierdo</i> </b>";
	$nombre_SO="Windows XP";
    ?>
    <link rel="stylesheet" type="text/css" media="all" href="css/editor_XP.css">
<?php }?>

<?php if($_COOKIE['so']=='android') {
    $so="Android";
    $simple_select="toque una vez";
	$nombre_SO="Android";
    ?>
    <link rel="stylesheet" type="text/css" media="all" href="css/editor_Android.css">
<?php }?>
<link rel="stylesheet" type="text/css" media="all" href="css/wordpad.css">
<script src="js/text-editor.js"></script>

<p class="xl">Editor de texto enriquecido</p>
<p class="large separado"><u>Fuentes</u></p>
<p>
	Cuando hablamos de <b> fuente </b> en la edición de textos, básicamente nos referimos a la letra.
	En ésta parte del tutorial, usted aprenderá a realizar las operaciones mas comunes sobre la fuente 
	(tipo, tamaño, color, resaltado, subrayado y cursiva), en un editor de texto enriquecido.
</p>

<?php
if($_COOKIE['so']=='w7')
	include_once("./htm/editor_W7.htm");
if($_COOKIE['so']=='xp')
	include_once("./htm/editor_XP.htm");
if($_COOKIE['so']=='android')
	include_once("./htm/editor_Android.htm");
?>
<p id="T3S1" style="text-align: left">
	<b> Escriba </b> algún texto en el editor, en su defecto la fuente utilizada por el editor es "CALIBRI".
	<br>Vamos a cambiar el tipo de letra a "BOINK LET", para ello <b>seleccione</b> todo o parte del texto,  
	<b> <?= $simple_select ?> </b> sobre el selector de familia de fuentes 	
	<img src="img/wordpad/<?= $so ?>/type_font_dropdown.png">
	y seleccione el tipo <b>BOINK LET</b>.<br>
	<span  id="T3S1-complete"></span>
</p>

<p id="T3S2" style="display: none; text-align: left">
	En su defecto el tamaño utilizado por el editor es "11".
	<br>Vamos a cambiar el tamaño a "20", habiendo texto seleccionado,  
	<b> <?= $simple_select ?> </b> sobre el selector de tamaño de fuentes <img src="img/wordpad/<?= $so ?>/tam_font_dropdown.png">
	y seleccione el tamaño <b>20</b>.<br>
	<span  id="T3S2-complete"></span>
</p>

<p id="T3S3" style="display: none;text-align: left">
	En su defecto el color utilizado por el editor es "NEGRO".
	<br>Vamos a cambiar el color a "ROJO", habiendo texto seleccionado,  
	<b><?= $simple_select ?></b> en el selector de color del texto 	<img src="img/wordpad/<?= $so ?>/color_dropdown.png"></img>
	y seleccione el color <b>ROJO</b>.<br>
	<span id="T3S3-complete"></span>
</p>

<p id="T3S4"  style="display: none;text-align: left">
	Usted puede resaltar texto de la siguiente manera, habiendo texto seleccionado, 
	<b> <?= $simple_select ?> </b> sobre el botón <b> negrita </b>
	<img src="img/wordpad/<?= $so ?>/bold_button.png">.<br>
	<span  id="T3S4-complete"></span>
</p>

<p id="T3S5" style="display: none;text-align: left">
	Usted puede subrayar texto de la siguiente manera, habiendo texto seleccionado, 
	<b> <?= $simple_select ?> </b> sobre el botón <b> subrayado </b>
	<img src="img/wordpad/<?= $so ?>/underline_button.png">.<br>
	<span  id="T3S5-complete"></span>
</p>

<p id="T3S6" style="display: none;text-align: left">
	Usted puede cambiar el texto a cursiva de la siguiente manera, habiendo texto seleccionado, 
	<b> <?= $simple_select ?> </b> sobre el botón <b> cursiva </b>
	<img src="img/wordpad/<?= $so ?>/italic_button.png">.<br>
	<span  id="T3S6-complete"></span>
	<br><br><br>
</p>

<div id="T3-complete" class="oculto">
	<p class="felicitacion">¡Felicitaciones, ha aprendido a operar sobre las fuentes del editor de texto enriquecido de <?= $nombre_SO ?> !</p>
	<p>Haga clic sobre el siguiente enlace para <a href="#" onclick="load('./pages/editortexto/parrafo.php')">seguir aprendiendo</a>.</p>
</div>